<template>
  <div>
    <h1>加载异步组件</h1>
    <!-- <ChildOne></ChildOne> -->
    <AsyncComp></AsyncComp>
  </div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
import ChildOne from './components/ChildOne.vue'
import ErrorComp from './components/ErrorComp.vue'
import axios from 'axios'
// const AsyncComp = defineAsyncComponent(()=>{
//   // 必须返回 promise 对象
//   return new Promise(async (resolve,reject)=>{
//     const res = await axios({
//       url:'http://www.bufantec.com/xx/xx/xx'
//     })
//     resolve(res)
//   })
// })

// ES 模块加载 返回一个 promise
// const AsyncComp = defineAsyncComponent(()=>{
//   // 必须返回 promise 对象
//   return import('./components/ChildOne.vue')
// })
const AsyncComp = defineAsyncComponent({
  loader:()=>import('./components/ChildOne.vue'),
  delay:200,
  errorComponent:ErrorComp,
  timeout:3000
})

</script>